<!--
 * @Author: REFUSE_C
 * @Date: 2022-03-04 09:06:44
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-19 15:59:20
 * @Description: 
-->

<template>
  <el-form ref="formRef" :label-width="labeWidth" :model="dataForm" class="form-box add-border">
    <form class="formBox">
      <transition v-for="(item, index) in formConfig" :key="index">
        <div>
          <el-form-item :key="index" :label="item.label" :prop="item.alias">
            <el-input style="width:200px" v-if="item.type === 'input'" v-model="dataForm[item.alias]"
              :clearable="item.clearable || true" :maxlength="item.max || 40"
              :placeholder="item.placeholder || `请输入${item.label}`" />
            <el-date-picker v-if="item.type === 'daterange'" v-model="dataForm[item.alias]" end-placeholder="结束时间"
              range-separator="→" start-placeholder="开始时间" type="daterange"></el-date-picker>
            <el-select style="width:200px" v-if="item.type === 'select'" v-model="dataForm[item.alias]" :clearable="item.clearable || true"
              :placeholder="`请选择${item.label}`">
              <el-option v-for="item in item.options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-cascader v-if="item.type === 'selects'" v-model="dataForm[item.alias]" :options="item.options"
              :placeholder="`请选择${item.label}`" clearable />
            <el-cascader v-if="item.type === 'selectsOne'" v-model="dataForm[item.alias]" :options="item.options"
              :props="props1" clearable />
          </el-form-item>
        </div>
      </transition>
      <div class="ml15 mb15">
        <el-button v-if="btnObj.isShow" type="primary" class="bg-blue-400 ml-3" @click="submitForm()">
          {{ btnObj.text }}
        </el-button>
        <slot name="control"></slot>
      </div>
    </form>
  </el-form>
</template>

<script>
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  props: {
    formConfig: Array,
    gutter: { type: Number, default: 24 },
    labeWidth: { type: String, default: '94px' },
    btnObj: Object,
  },
  setup(props, { emit }) {
    const dataForm = reactive({});
    //联级单选
    const props1 = {
      checkStrictly: true,
      value: "code",
      label: "name"
    }
    // 提交按钮
    const submitForm = () => {
      const tmpdata = {};
      Object.keys(dataForm).map((key) => {
        const config = props.formConfig;
        const index = props.formConfig.findIndex(els => els.alias == key);
        //查找是否传递钩子在提交前做一些对数据的处理，例如时间转换，格式转换
        if (config[index] && config[index].format) {
          const data = config[index].format(dataForm[key], dataForm);
          if (data && typeof data == 'object') {
            Object.keys(data).map(item => {
              //返回的数据放在表单里
              tmpdata[item] = data[item];
            })
          }
        } else {
          tmpdata[key] = dataForm[key];
        }
      });
      Object.keys(tmpdata).map(el => {
        if (!tmpdata[el]) {
          delete tmpdata[el]
        }
      })
      emit('submitForm', tmpdata)
    };
    // 合并btn
    const btnDefaultObj = {
      span: 6,
      isShow: true,
      text: '查询',
    };
    const btnObj = Object.assign(btnDefaultObj, props.btnObj);
    return { btnObj, dataForm, submitForm, props1 };
  },
});
</script>

<style lang="less">
.form-box {
  border-radius: 5px;
  border: 1px solid rgb(242, 242, 242);
  padding: 15px 0px 0px 0px;

  .formBox {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
